<template>
    <vue-context-menu
        :contextMenuData="contextMenuData"
        @copyHandle="fileCopyHandle"
        @deleteHandle="deleteHandle"
    ></vue-context-menu>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import { bus } from '@/utils/public';

const { mapState, mapMutations } = createNamespacedHelpers('copy');
export default {
  props: ['list'],
  data() {
    return {
      coordinate: {
        x: '',
        y: '',
      },
      copyStore: [],
      contextMenuData: {
        menuName: 'contextFileMenu',
        axis: {
          x: '',
          y: '',
        },
        // 菜单选项
        menulists: [
          {
            // fnHandler: 'sortHandle', //绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('open'), // 菜单名称
          },
          {
            // fnHandler: 'sortHandle', //绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('share'), // 菜单名称
          },
          {
            // fnHandler: 'sortHandle', //绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('copy link'), // 菜单名称
          },
          {
            fnHandler: 'copyHandle', // 绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('copy'), // 菜单名称
          },
          // {
          //     fnHandler: 'pasteHandle', //绑定事件
          //     //icoName: 'el-icon-sort', //icon图标
          //     btnName: this.$t('paste'), //菜单名称
          // },
          {
            // fnHandler: 'sortHandle', //绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('move'), // 菜单名称
          },
          {
            fnHandler: 'deleteHandle', // 绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('delete'), // 菜单名称
          },
          {
            // fnHandler: 'sortHandle', //绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('rename'), // 菜单名称
          },
          {
            // fnHandler: 'sortHandle', //绑定事件
            // icoName: 'el-icon-sort', //icon图标
            btnName: this.$t('detail'), // 菜单名称
          },
        ],
      },
    };
  },
  computed: {
    // contextMenuData: function () {
    //     return {
    //     }
    // },
    ...mapState('copy', [
      'copyList',
    ]),
  },
  mounted() {
    // this.getSaveOrder();
    this.hideMenu();
  },
  methods: {
    setCurrentSort(name, order) {
      this.currentSort.name = name;
      this.currentSort.order = order;
    },
    showMenu(event, item, index) {
      // console.log(event);
      event.preventDefault();
      const x = event.clientX;
      const y = event.clientY;
      // Get the current location
      this.coordinate = { x, y };
      this.currentItem = item;
      this.currentIndex = index;
    },
    hideMenu() {
      setTimeout(() => {
        const menuName = `vue-contextmenuName-${this.contextMenuData.menuName}`;
        const menu = document.getElementsByClassName(menuName)[0];
        menu.style.display = 'none';
      }, 0);
    },
    fileCopyHandle() {
      this.clearHandle();
      this.copyHandle(this.currentItem);
      bus.$emit('hideMainRightMenu');
    },
    // pasteHandle() {
    //      this.list.push(...this.copyList);
    // },
    changeHandle(val) { // eslint-disable-line
      // console.log(val);
    },
    deleteHandle() {
      this.$confirm(this.$t('whether to confirm deletion'), this.$t('remind'), {
        confirmButtonText: this.$t('sure'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning',
      }).then(() => {
        // console.log('------delete-----');
        // console.log('this.currentItem', this.currentItem);
        // if (!this.currentItem.delete) {
        //     this.$set(this.currentItem, 'delete', true);
        // } else {
        //     let index = this.list.findIndex((item)=> item === this.currentItem);
        //     this.list.splice(index, 1);
        // }
      });
    },
    ...mapMutations([
      'copyHandle',
      'clearHandle',
    ]),
  },
};
</script>
<style>
</style>
